import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import { Checkbox, Stepper, Dialog, SubmitBar } from "react-vant";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const navigate = useNavigate();
  // 购物车
  const cartList = useSelector((state: RootState) => state.car.carList);
  // 总价
  const totalPrice = cartList
    .filter((v) => v.state)
    .reduce((p, n) => {
      return p + n.price * n.count;
    }, 0);
  // 全选状态
  const totalState = cartList.every((v) => v.state);

  const dispatch = useDispatch();

  return (
    <div>
      <div className="car-list">
        {cartList.map((v, i) => {
          return (
            <dl key={i} className="car-item">
              <dt>
                <Checkbox
                  checked={v.state}
                  onChange={() =>
                    dispatch({ type: "checkedCarList", payload: v })
                  }
                ></Checkbox>
              </dt>
              <dt>
                <img src={v.images[0]} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <div>
                  <Stepper
                    onMinus={() =>
                      dispatch({
                        type: "jianlist",
                        payload: v,
                      })
                    }
                    onPlus={() =>
                      dispatch({
                        type: "addCarList",
                        payload: v,
                      })
                    }
                    onOverlimit={() =>
                      Dialog.confirm({
                        title: "警告",
                        message: "再减少就要删除了！！",
                      })
                        .then(() => {
                          dispatch({ type: "delCarList", payload: v });
                        })
                        .catch(() => {})
                    }
                    value={v.count}
                    min={1}
                  ></Stepper>
                </div>
                <div>¥：{v.price}</div>
              </dd>
            </dl>
          );
        })}
      </div>
      <SubmitBar
        price={totalPrice * 100}
        buttonText="提交订单"
        onSubmit={() => {
          // 1. 方式一： 本地存储  不建议
          // localStorage.setItem('price', JSON.stringify(totalPrice))
          // 2. 方式二： 动态路由传参
          // navigate(`/order/哈哈哈`);
          // 3. 方式三： 隐式路由传惨
          // navigate('/order', {
          //   state: {
          //     totalPrice
          //   }
          // })
          // 4. 方式四： 查询参数
          navigate("/order?price=" + totalPrice);
        }}
      >
        <Checkbox
          checked={totalState}
          onChange={(checked) =>
            dispatch({
              type: "allChecked",
              payload: checked,
            })
          }
        >
          全选
        </Checkbox>
      </SubmitBar>
    </div>
  );
};

export default Index;
